<template>
  <div class="loading" v-if="loading || empty">
    <div v-if="loading">
      <spinner type="lines"></spinner>
      <p>正在加载...</p>
    </div>
    <div v-else-if="empty">
      <img class="placeholder" src="../../assets/no-data.png">
      <!-- <p><slot>没有数据...</slot></p> -->
    </div>
  </div>
</template>

<script>
import { Icon, Spinner } from 'vux'

export default {
  components: {
    Icon,
    Spinner
  },
  props: {
    loading: {
      type: Boolean,
      required: true,
      default: true
    },
    empty: {
      type: Boolean,
      required: true,
      default: true
    }
  },
  data () {
    return {
      name: 'loading'
    }
  }
}
</script>

<style lang="scss">
  .loading {
    text-align: center;
    padding: 10rem 0;
    .placeholder {
      width: 10rem;
    }
    p {
      color: #666;
      margin-top: 10px;
    }
  }
</style>
